<template>
  <a-modal v-model:visible="visible" :maskClosable="false" :title="title">
    <a-form
      ref="formRef"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item
        label="字典所属模块"
        name="paramModule"
        :rules="[{ required: true, message: '请填写字典所属模块' }]"
      >
        <a-select v-model:value="form.paramModule" placeholder="选择字典模块">
          <a-select-option
            v-for="item in enums"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        label="字典key"
        name="paramKey"
        :readonly="type === 'edit'"
        :rules="[{ required: true, message: '请填写字典key' }]"
      >
        <a-input v-model:value="form.paramKey" :maxlength="16" />
      </a-form-item>
      <a-form-item
        label="字典值"
        name="paramValue"
        :rules="[{ required: true, message: '请填写字典值' }]"
      >
        <a-input v-model:value="form.paramValue" :maxlength="50" />
      </a-form-item>

      <a-form-item
        label="字典名称"
        name="paramName"
        :rules="[{ required: true, message: '请填写字典名称' }]"
      >
        <a-input v-model:value="form.paramName" :maxlength="50" />
      </a-form-item>

      <a-form-item
        label="字典类型"
        name="paramType"
        :rules="[{ required: true, message: '请选择字典类型' }]"
      >
        <a-select
          v-model:value="form.paramType"
          allowClear
          placeholder="选择字典类型"
        >
          <a-select-option value="number">数字</a-select-option>
          <a-select-option value="string">字符</a-select-option>
          <a-select-option value="date">时间</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="cancel" :loading="loading">取消</a-button>
      <a-button type="primary" :loading="loading" @click="submit(false)"
        >确定</a-button
      >
      <a-button
        type="primary"
        v-if="type === 'add'"
        :loading="loading"
        @click="submit(true)"
        >保存并继续</a-button
      >
    </template>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, Ref, toRefs } from "vue";
import type { FormInstance } from "ant-design-vue";
import systemApis from "@/apis/system";
export default defineComponent({
  name: "DictionaryEditForm",
  props: {
    enums: {
      type: Array,
      default: true,
    },
  },
  setup(props, { emit }) {
    const formRef = ref<FormInstance>();
    const state = reactive({
      form: {
        paramKey: "",
        paramValue: "",
        paramName: "",
        paramType: "",
        paramModule: "",
        id: "",
      },
      visible: false as boolean,
      needUpdate: false as boolean,
      type: "add",
      title: "",
      loading: false as boolean,
    });

    const open = (type: "add" | "edit", data: any = {}) => {
      state.type = type;
      state.visible = true;
      state.needUpdate = false;
      state.title = type === "add" ? "新增字典" : "编辑字典";
      if (type === "add") {
        state.form = {
          paramKey: "",
          paramValue: "",
          paramName: "",
          paramType: "",
          paramModule: "",
          id: "",
        };
      } else {
        state.form = {
          paramKey: data.paramKey,
          paramValue: data.paramValue,
          paramName: data.paramName,
          paramType: data.paramType,
          paramModule: data.paramModule,
          id: data.paramModule,
        };
      }
      console.log(data);
    };

    const submit = async (_continue: boolean = false) => {
      try {
        const values = await formRef.value?.validateFields();
        console.log(values, state.form);
        if (state.type === "add") {
          const res: any = await systemApis.crateDictionary(state.form);
          if (res.code === 0) {
            state.needUpdate = true;
            if (_continue) {
              state.form = {
                paramKey: "",
                paramValue: "",
                paramName: "",
                paramType: "",
                paramModule: "",
                id: "",
              };
              formRef.value?.resetFields();
            } else {
              cancel();
            }
          }
        }
        if (state.type === "edit") {
          const res: any = await systemApis.editRole(state.form);
          if (res.code === 0) {
            state.needUpdate = true;
            formRef.value?.resetFields();
            cancel();
          }
        }
      } catch (err) {}
    };

    const cancel = () => {
      if (state.needUpdate) {
        emit("submit");
      }
      state.visible = false;
    };
    return {
      formRef,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      open,
      submit,
      cancel,
      ...toRefs(state),
    };
  },
});
</script>